<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>产品信息</title>
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/element-ui/lib/theme-chalk/index.css"
    />
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant_2.12.54.css"
    />

    <style>
      .el-select-dinwei .el-select-dropdown {
        left: -40% !important;
      }
      .search-bar {
        display: flex;
        padding: 10px;
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 999;
      }
      .action-container {
        padding: 10px;
        position: sticky;
        bottom: 0px;
        background: #fff;
        z-index: 999;
      }
      .u-flex {
        display: flex;
      }
      .u-row-around {
        justify-content: space-around;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
      }

      #app {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="u-p-t-15">
        <div class="search-bar d-flex u-m-b-10 u-col-center isHeader">
          <span
            class="u-m-l-20"
            style="align-items: center; display: flex; margin-right: auto"
          >
            <template v-if="mode === 'add'">
              <el-tag class="u-m-t-2" size="mini" type="success"
                >产品信息-新增</el-tag
              >
            </template>
            <template v-if="mode === 'edit'">
              <el-tag class="u-m-t-2" size="mini">产品信息-编辑</el-tag>
            </template>
            <template v-if="mode === 'details'">
              <el-tag class="u-m-t-2" size="mini" type="info"
                >产品信息-详情</el-tag
              >
            </template>
          </span>
        </div>
        <div ref="formHeight" class="print-container">
          <el-form
            size="small"
            label-width="8em"
            label-position="right"
            style="padding: 5px 25px 0 5px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="所属组织" required>
                  <el-select
                    v-model="formData.Company_Code"
                    placeholder="所属组织"
                    :style="{ width: '100%' }"
                    filterable
                    :disabled="isFormDataDisabled"
                  >
                    <el-option
                      v-for="item in formOptions.CompanyCodeOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="产品名称" required>
                  <el-input
                    v-model="formData.SDLITM"
                    :disabled="isFormDataDisabled"
                    :controls="false"
                    placeholder="地址简称"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="产品描述" required>
                  <el-input
                    v-model="formData.SDDSC1"
                    :disabled="isFormDataDisabled"
                    :controls="false"
                    placeholder="产品描述"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="UN号">
                  <el-input
                    v-model="formData.UNNO"
                    :disabled="isFormDataDisabled"
                    placeholder="UN号"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="包装类别">
                  <el-select
                    v-model="formData.packCategory"
                    placeholder="包装类别"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.shenqingrenOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="危险品等级">
                  <el-select
                    v-model="formData.GoodsGrade"
                    placeholder="危险品等级"
                    :style="{ width: '100%' }"
                    :disabled="isFormDataDisabled"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.xiehuojianchengOptiopns"
                      :key="item.ID"
                      :label="item.ID"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="包装规格">
                  <el-input
                    v-model="formData.packSpecs"
                    :disabled="isFormDataDisabled"
                    placeholder="包装规格"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="MSDS">
                  <el-input
                    v-model="formData.MSDS"
                    :disabled="isFormDataDisabled"
                    placeholder="MSDS"
                    :style="{ width: '100%' }"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6}"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="action-container u-flex u-row-around">
          <el-button type="info" plain size="mini" @click="close"
            >关闭</el-button
          >
          <el-button
            type="primary"
            :loading="isLoadingBtn"
            size="mini"
            @click="submit"
            >提交</el-button
          >
        </div>
      </div>
    </div>
    <script src="https://wxapp.jsadf.com/vendor/vue2.prod.bundle.js"></script>
    <script src="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/element-ui/lib/index.js"></script>

    <script>
      let baseUrl = "https://www.51yunmai.com";
      let REQUIRED_PORP_LIST1 = [
        {
          prop: "Company_Code",
          label: "所属组织",
        },
        {
          prop: "SDLITM",
          label: "产品名称",
        },
        {
          prop: "SDDSC1",
          label: "产品描述",
        },
      ];

      /**
       * 校验表单
       */
      function $validateForm(data, all, arrProp, vm) {
        let ret = true;
        let f = data;
        let len = all.length;
        const arrTypeProps = arrProp || [];
        let showError = (err) => {
          vm.$notify.warning({
            title: "消息",
            message: err + "不能为空",
          });
        };
        for (let index = 0; index < len; index++) {
          const item = all[index];
          let { prop, label } = item;
          let val = f[prop];
          if (arrTypeProps.includes(prop)) {
            if (val.length === 0) {
              showError(label);
              ret = false;
              break;
            }
          } else if (typeof val === "undefined") {
            showError(label);
            ret = false;
            break;
          } else if (val === null) {
            showError(label);
            ret = false;
            break;
          } else {
            let isUnValid =
              typeof val === "string" && (val || "").trim() === "";
            if (isUnValid) {
              showError(label);
              ret = false;
              break;
            }
          }
        }
        return ret;
      }
      /**
       * 转换URL参数
       */
      function queryToObject() {
        const res = {};
        const search = location.search.substr(1); // 返回类似于 a=10&b=20&c=30
        const paramArr = search.split("&");
        paramArr.forEach(function (item) {
          const itemArr = item.split("=");
          const key = itemArr[0];
          const value = itemArr[1];
          res[key] = value;
        });
        return res;
      }
      Vue.use(ELEMENT);
      let nuteidm = (i, id, name) => {
        return {
          ID: i[id],
          Name: i[name],
          ...i,
        };
      };

      new Vue({
        el: "#app",
        data() {
          return {
            mode: "",
            queryOptionMap: {
              kehujianchengOptiopnMap: {},
              templateNamedaoruOptiopnsMap: {},
            },
            formData: {
              Company_Code: undefined,
              MSDS: undefined,
              SDDSC1: undefined,
              packCategory: undefined,
              GoodsGrade: undefined,
              UNNO: undefined,
              packSpecs: undefined,
            },

            formOptions: {
              CompanyCodeOptions: [],
              shenqingrenOptions: [
                {
                  ID: 1,
                  Name: "I 类包装",
                },
                {
                  ID: 2,
                  Name: "II 类包装",
                },
                {
                  ID: 3,
                  Name: "III 类包装",
                },
              ],
              xiehuojianchengOptiopns: [
                {
                  ID: "1",
                },
                {
                  ID: "1.1",
                },
                {
                  ID: "1.2",
                },
                {
                  ID: "1.3",
                },
                {
                  ID: "1.4",
                },
                {
                  ID: "1.5",
                },
                {
                  ID: "2",
                },
                {
                  ID: "2.1",
                },
                {
                  ID: "2.2",
                },
                {
                  ID: "2.3",
                },
                {
                  ID: "3",
                },
                {
                  ID: "4",
                },
                {
                  ID: "4.1",
                },
                {
                  ID: "4.2",
                },
                {
                  ID: "4.3",
                },
                {
                  ID: "5",
                },
                {
                  ID: "5.1",
                },
                {
                  ID: "5.2",
                },
                {
                  ID: "6",
                },
                {
                  ID: "6.1",
                },
                {
                  ID: "6.2",
                },
                {
                  ID: "7",
                },
                {
                  ID: "7.1",
                },
                {
                  ID: "7.2",
                },
                {
                  ID: "7.3",
                },
                {
                  ID: "8",
                },
                {
                  ID: "9",
                },
              ],
            },
            // 是否禁用表单输入
            isFormDataDisabled: false,
            // 提交loading
            isLoadingBtn: false,
          };
        },
        computed: {
          isdevUrl() {
            let url = location.href;
            return url.indexOf("http://127.0.0.1:5500") !== -1;
          },
        },
        methods: {
          close() {
            if (this.isdevUrl) {
              location.href = `http://127.0.0.1:5500/chanpinxinxi/chanpinxinxi.html`;
            } else {
              // 处理其他环境或默认行为
            }
          },
          async submit() {
            if (!$validateForm(this.formData, REQUIRED_PORP_LIST1, [], this))
              return;
            if (this.mode === "edit") {
              this.editAxiosPram();
            } else {
              this.addAxiosPram();
            }
          },
          //新增接口
          async addAxiosPram() {
            let f = this.formData;
            const res = await axios.post(
              `/DO_ProductCode/Add?sdlitm=${f.SDLITM}`,
              f,
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            );
            if (res.data.state === 200) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.close();
            } else {
              this.$message({
                message: res.data.Message,
                type: "error",
              });
            }
          },
          //编辑接口
          async editAxiosPram() {
            let f = this.formData;
            const res = await axios.post(
              `/DO_ProductCode/Edit?id=${f.Id}&goodgrade=`,
              f,
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            );
            if (res.data.state === 200) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.close();
            } else {
              this.$message({
                message: res.data.Message,
                type: "error",
              });
            }
          },
          async getCustomerC() {
            //所属组织
            const res2 = await axios.post(
              "/CombBox/GetCusCompany?Companylist=",
              {},
              {}
            );
            if (res2.status === 200) {
              this.formOptions.CompanyCodeOptions = res2.data.map((item) => {
                return {
                  Name: item.Company_Name,
                  ID: item.Company_Code,
                };
              });
            }
          },
        },

        async created() {
          this.getCustomerC(); //获取下拉
          let query = queryToObject();
          this.mode = query.mode;
          if (this.mode === "edit") {
            const order = JSON.parse(decodeURIComponent(query.order));
            this.formData = order;
          }
        },
      });
    </script>
  </body>
</html>
